<template>
  <div :class="$style.container">
    <div :class="$style.select_time">
      <label>时间</label>
      <el-button :class="$style.btn" v-for="item in quickTimeList" :key="item.id" :type="item.selected ? 'primary' : 'default'" @click.stop="quickSelectTime(item)" >{{item.label}}</el-button>
      <el-date-picker :class="$style.date_picker" type="daterange" value-format="yyyy-MM-dd" v-model="searchParams.selectedTime" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="selectedTime"></el-date-picker>
      <el-button type="primary" :class="$style.search_btn" @click="searchAlarmTrackList">查询</el-button>
    </div>

    <div :class="$style.select_status">
      <label>任务状态</label>
      <el-button :class="$style.btn" v-for="item in statusList" :key="item.label" :type="item.selected ? 'primary' : 'default'" @click.stop="selectStatus(item)">{{item.label}}</el-button>
    </div>

    <div :class="$style.alarm_table">
      <div :class="$style.header">
        <label>报警跟踪</label>
      </div>
      <el-table style="width:100%" border resizable :data="alarmTrackTableData">
        <el-table-column prop="ticketNo" label="任务编号"></el-table-column>
        <el-table-column prop="customerName" label="产线"></el-table-column>
        <el-table-column prop= "devName" label="设备信息"></el-table-column>
        <el-table-column prop="alarmSource" label="报警来源"></el-table-column>
        <el-table-column prop="alarmMessage" label="报警信息"></el-table-column>
        <el-table-column prop="severity" label="报警级别"></el-table-column>
        <el-table-column prop="commitTime" label="报警处理时间"></el-table-column>
        <el-table-column prop="handlerName" label="当前处理人"></el-table-column>
        <el-table-column prop="taskStatus" label="任务状态"></el-table-column>
        <el-table-column label="操作" fixed="right" min-width='136' header-align="center">
          <template>
            <el-button type="primary" size="mini">分析</el-button>
            <el-button type="primary" size="mini">确认</el-button>
            <el-button type="danger" size="mini">忽略</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div :class="$style.pagination">
      <el-pagination
        background
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentPageChange"
        :current-page="pages.currentPage"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import api from '../../../common/js/api';
import moment from 'moment';
const getAlarmTrackList = params => {
  return api.post('ticketTaskService.getDealTicketListByPage', params).then(ret => {
    return ret;
  });
};

export default {
  name: 'AlarmTrack',
  data () {
    return {
      searchParams: {
        selectedTime: [],
        commitBeginTime: '',
        commitEndTime: '',
        selectedStatus: null
      },

      alarmTrackTableData: [],
      quickTimeList: [
        {
          id: 1,
          label: '当日处理任务',
          selected: false
        }, {
          id: 2,
          label: '本周处理任务',
          selected: false
        }, {
          id: 3,
          label: '本月处理任务',
          selected: false
        }
      ],
      statusList: [
        {
          id: 1,
          label: '全部',
          value: '',
          selected: true
        }, {
          id: 2,
          label: '待诊断',
          value: 'checking',
          selected: false
        }, {
          id: 3,
          label: '待审批',
          value: 'auditing',
          selected: false
        }, {
          id: 4,
          label: '待委托',
          value: 'trusting',
          selected: false
        }, {
          id: 5,
          label: '待检修',
          value: 'maintaining',
          selected: false
        }, {
          id: 6,
          label: '待验收',
          value: 'accepting',
          selected: false
        }, {
          id: 7,
          label: '待评价',
          value: 'assessing',
          selected: false
        }, {
          id: 8,
          label: '待说明',
          value: 'explaining',
          selected: false
        }, {
          id: 9,
          label: '待关闭',
          value: 'closing',
          selected: false
        }, {
          id: 10,
          label: '已完成',
          value: 'end',
          selected: false
        }
      ],
      pagination: {
        start: 0,
        length: 10,
        statCount: true
      },
      pages: {
        total: 0,
        cuttrntPage: 1
      }
    };
  },

  mounted () {
    this.searchAlarmTrackList();
  },

  methods: {
    searchAlarmTrackList () {
      let param = {
        categorys: '50',
        commitBeginTime: '',
        commitEndTime: '',
        processedTickeTaskStatus: 'newPTC',
        taskDealingStatus: 'newPTC',
        tickeTaskStatus: '',
        validUserFlag: true
      };
      param.commitBeginTime = this.searchParams.commitBeginTime;
      param.commitEndTime = this.searchParams.commitEndTime;
      param.tickeTaskStatus = this.searchParams.selectedStatus;
      let params = [];
      params.push(param);
      params.push(this.pagination);
      getAlarmTrackList(params).then(ret => {
        let trackList = (ret.data && ret.data.data) || [];
        this.pages.total = (ret.data && ret.data.total) || 0;
        let result = [];
        trackList.forEach(item => {
          let ticketNo = item.ticketNo;
          let customerName = item.customerName;
          let devName = item.devName;
          let alarmSource = item.appName;
          let alarmMessage = item.alertTitle;
          let severity = item.severity;
          let commitTime = item.commitTime;
          let handlerName = item.handlerName;
          let taskStatus = item.status;

          let track = {
            ticketNo,
            customerName,
            devName,
            alarmSource,
            alarmMessage,
            severity,
            commitTime,
            handlerName,
            taskStatus
          };
          result.push(track);
        });

        this.alarmTrackTableData = result;
      });
    },

    quickSelectTime (item) {
      this.resetPagination();
      for (let i = 0; i < this.quickTimeList.length; i++) {
        if (this.quickTimeList[i].id === item.id) {
          this.quickTimeList[i].selected = !item.selected;

          if (this.quickTimeList[i].selected) {
            this.searchParams.selectedTime = [];
            this.setCommitTime(this.quickTimeList[i]);
          } else {
            this.searchParams.selectedTime = [];
            this.searchParams.commitBeginTime = '';
            this.searchParams.commitEndTime = '';
            this.searchAlarmTrackList();
          }
        } else {
          this.quickTimeList[i].selected = false;
        }
      }
    },

    setCommitTime (time) {
      switch (time.id) {
        case 1: {
          this.searchParams.commitBeginTime = moment(moment().startOf('day')).utc().format();
          this.searchParams.commitEndTime = moment(moment().endOf('day')).utc().format();
          this.searchAlarmTrackList();
          break;
        }
        case 2: {
          this.searchParams.commitBeginTime = moment(moment().startOf('isoWeek')).utc().format();
          this.searchParams.commitEndTime = moment(moment().endOf('isoWeek')).utc().format();
          this.searchAlarmTrackList();
          break;
        }
        case 3: {
          this.searchParams.commitBeginTime = moment(moment().startOf('month')).utc().format();
          this.searchParams.commitEndTime = moment(moment().endOf('month')).utc().format();
          this.searchAlarmTrackList();
          break;
        }
        default: break;
      }
    },

    selectedTime (val) {
      this.resetPagination();
      this.quickTimeList.forEach(item => { item.selected = false; });
      this.searchParams.commitBeginTime = val && val.length > 0 ? moment.utc(val[0]).format() : '';
      this.searchParams.commitEndTime = val && val.length > 0 ? moment.utc(val[1]).format() : '';
    },

    resetPagination () {
      this.pagination.start = 0;
      this.pages.currentPage = 1;
    },

    selectStatus (item) {
      if (item.selected) { return; }
      this.statusList.forEach((status) => {
        if (item.id === status.id) {
          status.selected = true;
          this.searchParams.selectedStatus = item.value;
          this.resetPagination();
        } else {
          status.selected = false;
        }
      });
      this.searchAlarmTrackList();
    },

    handlePageSizeChange (val) {
      this.pagination.length = val;
      this.pagination.start = 0;
      this.pages.currentPage = 1;
      this.searchAlarmTrackList();
    },

    handleCurrentPageChange (val) {
      this.pages.currentPage = val;
      this.pagination.start = this.pagination.length * (val - 1);
      this.searchAlarmTrackList();
    }
  }
};
</script>

<style lang="scss" module>
  @import '../../../style/default/alarm-track.scss'
</style>
